<template>
	<view class="index">
		<view class="search">
			<!-- 搜索栏 -->
			<view class="searchBox" @click="search">
				<image class="image" src="/static/icon/serach.png" mode="aspectFit"></image>
				<view class="text">
					<text>输入需要查找的食物</text>
				</view>
			</view>
		</view>
		<view class="type">
			<ppc-section title="热门分类"></ppc-section>
			<view class="typeCard">
				<view class="itemCard" v-for="(item,index) in typeList" :key="index" @click="changeFood(item)">
					<image class="img" :src="item.image" mode="aspectFit"></image>
					<text class="text">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="recommend">
			<ppc-section title="最新推荐"></ppc-section>
			<scroll-view @scrolltolower="lowerBottom" style="height:90%;" scroll-y="true">
				<view class="card" v-for="(item,index) in articleData" :key="index" @click="showDetail(item)">
					<view class="imgCard">
						<image :src="item.image" mode="aspectFill" class="image"></image>
					</view>
					<view class="text">
						<text class="title">{{item.title}}</text>
						<text class="content">{{item.describe}}</text>
					</view>
				</view>
			</scroll-view>
			<ppc-loading v-if="loading" :isSmall="true" :inView='true'></ppc-loading>
		</view>
	</view>
</template>

<script setup>
	import {
		onBeforeMount,
		ref,
		getCurrentInstance
	} from 'vue';
	import ppcSection from '/components/ppcSection.vue'
	import ppcLoading from '/components/ppcLoading.vue'
	const {
		proxy
	} = getCurrentInstance()
	//判断是否触底
	const isBottom = ref(false)
	//当前页数
	const currentPage = ref(1)
	//每页显示的条数
	const pageSize = ref(3)
	const typeList = ref([{
		name: "早餐推荐",
		image: "/static/icon/breakfast.png"
	}, {
		name: "午餐推荐",
		image: "/static/icon/lunch.png"
	}, {
		name: "晚餐推荐",
		image: "/static/icon/dinner.png"
	}, {
		name: "加餐推荐",
		image: "/static/icon/addFood.png"
	}])
	const articleData = ref([])
	const loading = ref(false)
	onBeforeMount(() => {
		getArticle()
	})
	const search = () => {
		uni.navigateTo({
			url: "/pages/searchFood/searchFood"
		})
	}
	//滑动到底部
	const lowerBottom = () => {
		console.log('aaasssssaaaa');
		if (!isBottom.value) {
			currentPage.value += 1
			getArticle()
		}
	}
	//跳转对应的饮食
	const changeFood = (item) => {
		uni.navigateTo({
			url: `/pages/recommendFood/recommendFood?type=${item.name}`
		})
	}
	//跳转到文章详细
	const showDetail = (item) => {
		uni.$on('richtext1',()=>{
			uni.$emit("articleData", item)
		})
		uni.navigateTo({
			url: "/pages/article/article"
		})
	}
	//获取推荐文章
	const getArticle = () => {
		loading.value = true
		proxy.$http("getArticle", {
			currentPage: currentPage.value,
			pageSize: pageSize.value
		}).then(res => {
			if (!res.errCode) {
				articleData.value = [...articleData.value, ...res.result.data.data]
				if (res.result.data.affectedDocs < pageSize.value) {
					isBottom.value = true
				}
				loading.value = false
			}
		})
	}
</script>

<style lang="scss">
	.index {
		height: 100vh;

		.search {
			display: flex;
			align-items: center;
			height: 10%;
			margin: 0 30rpx;

			.searchBox {
				width: 100%;
				height: 80rpx;
				margin: 20rpx 0;
				border-radius: 10rpx;
				background: #FFF;
				display: flex;
				align-items: center;

				.image {
					margin: 0 20rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.text {
					width: 70%;
					font-size: 26rpx;
					color: #afafaf;
				}
			}
		}

		.type {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 25%;

			.typeCard {
				background: #FFF;
				margin: 0 30rpx;
				padding: 30rpx 20rpx;
				display: flex;
				border-radius: 20rpx;
				justify-content: space-between;

				.itemCard {
					display: flex;
					flex-direction: column;
					align-items: center;

					.img {
						width: 80rpx;
						height: 80rpx;
					}

					.text {
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #555;
						font-weight: bold;
					}
				}
			}
		}

		.recommend {
			height: 65%;

			.card {
				position: relative;
				background: #ccc;
				height: 400rpx;
				margin: 30rpx;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;

				.imgCard {
					position: absolute;
					width: 100%;
					height: 100%;

					.image {
						width: 100%;
						height: 100%;
						border-radius: 30rpx;
					}
				}

				.text {
					position: absolute;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					margin: 0 10rpx;
					bottom: 30rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #fff;

					.content {
						margin-top: 6rpx;
						font-size: 26rpx;
						font-weight: 500
					}
				}


			}
		}
	}
</style>